<template>
  <div class="exam-page">
      <!-- 标题栏 -->
      <header class="header">
          <div class="header-left">
              <span>模拟考试</span>
          </div>
          <div class="header-middle">
              <!-- 倒计时卡片 -->
              <div class="timer" v-if="minutes!=undefined && minutes != '' && minutes !== null ">
                  <span class="timer-title">剩余时间</span>
                  <div class="timer-display" >
                      <span>{{ hours }}</span>:<span>{{ minutes }}</span>:<span>{{ seconds }}</span>
                  </div>
              </div>
          </div>
          <div class="header-right">
              <!-- 提交试卷按钮 -->
              <button class="submit-btn" @click="submitExam">提交试卷</button>
          </div>
      </header>
      <el-dialog
      width="50%"
  v-model="dialogVisible"
  title="错题信息"
  :close-on-click-modal="false"
  :show-cancel-button="false"
  :show-confirm-button="true"
  confirm-button-text="确定"
  @confirm="handleConfirm"
  @close="handleClose"
>
  <div v-html="errorMessage"></div>
  <div><el-button type="primary" @click="handleConfirm">退出页面</el-button></div>
</el-dialog>
<!--错误信息弹窗-->
<el-progress 
    color="#ff4040" 
    :text-color="'#ff0000'" 
    :percentage="progressPercentage" 
    type="line"
     :stroke-width="20"
    />
    
      <!-- 主体内容 -->
      <div class="content">
          <!-- 左侧信息栏 -->
          <aside class="sidebar">
              <!-- 左侧信息卡片 -->
              <div class="sidebar-info card">
                  <!-- 考生信息卡片 -->
                  <div class="exam-info">
                      <p>考生姓名：<span>{{ studentInfo.name }}</span></p>
                      <p>学号：<span>{{ studentInfo.id }}</span></p>
                  </div>
                  <hr />
                  <!-- 进度信息卡片 -->
                   <div class="progress">
                       <!-- 使用 el-progress 组件显示进度 -->
                        <div class="progress-bar"> 
                          <el-progress :percentage="progressPercentage" color="#ff4040" ></el-progress>
                        </div>
              </div>
                  <hr />
                  <!-- 题型导航容器 -->
                  <div class="a1">

  <!-- 跳转题目按钮 -->
  <p v-if="singleChoice.size > 0">单选题</p>
  <div class="jump-buttons">
    <button 
v-for="n in singleChoice.size" 
:key="n" 
class="jump-button"
:class="{ 'answered': isAnswered(singleChoice.list[n-1].subject_id) }"
@click="goToQuestion('singleChoice', n)"
>
{{ n }}
</button>
  </div>

  <p v-if="multipleChoice.size > 0">多选题</p>
  <div class="jump-buttons">
    <button 
v-for="n in multipleChoice.size" 
:key="n" 
class="jump-button"
:class="{ 'answered': isAnswered(multipleChoice.list[n-1].subject_id) }"
@click="goToQuestion('multipleChoice', n+singleChoice.size)"
>
{{ n+singleChoice.size }}
</button>
  </div>

  <p v-if="trueFalse.size > 0">判断题</p>
  <div class="jump-buttons">
    <button 
v-for="n in trueFalse.size" 
:key="n" 
class="jump-button"
:class="{ 'answered': isAnswered(trueFalse.list[n-1].subject_id) }"
@click="goToQuestion('trueFalse', n+singleChoice.size+multipleChoice.size)"
>
{{ n+singleChoice.size+multipleChoice.size }}
</button>
  </div>
                  </div>
              </div>
          </aside>
           
          <!-- 试题展示区域 -->
          <main class="question-area card">
<section v-if="singleChoice.size > 0">
  <el-card shadow="hover">
    <h2 v-if="singleChoice && singleChoice.name && singleChoice.size !== undefined && singleChoice.totalScore !== undefined">
      {{ singleChoice.name }} ( {{ singleChoice.size }} 题，合计{{ singleChoice.totalScore }} 分)
    </h2>
    <ul>
      <li v-for="(question, index) in singleChoice.list" :key="question.subject_id" :ref="setSingleChoiceRef">
        <p>{{ index + 1 }}. {{ question.subject_name }}
          <!-- 显示图片的工具提示 -->
          <el-tooltip effect="dark" v-if="question.subject_image">
            <template #content>
              <div v-html="generateImageHtml(question.subject_image)"></div>
            </template>
            <el-button>查看图片</el-button>
          </el-tooltip>
        </p>

        <el-radio-group v-model="selectedAnswers[question.subject_id]">
          <ul>
            <li v-if="question.option_a != null && question.option_a !== undefined && question.option_a !== '' ">
              <el-radio :label="'A'">{{ 'A. ' + question.option_a }}</el-radio>
            </li>
            <li v-if="question.option_b != null && question.option_b !== undefined && question.option_b !=='' ">
              <el-radio :label="'B'">{{ 'B. ' + question.option_b }}</el-radio>
            </li>
            <li v-if="question.option_c != null && question.option_c !== undefined && question.option_c !== '' ">
              <el-radio :label="'C'">{{ 'C. ' + question.option_c }}</el-radio>
            </li>
            <li v-if="question.option_d != null && question.option_d !== undefined && question.option_d !== '' ">
              <el-radio :label="'D'">{{ 'D. ' + question.option_d }}</el-radio>
            </li>
            <li v-if="question.option_e != null && question.option_e !== undefined && question.option_e !== ''">
              <el-radio :label="'E'">{{ 'E. ' + question.option_e }}</el-radio>
            </li>        
            <li v-if="question.option_f != null && question.option_f !== undefined && question.option_f !== ''">
              <el-radio :label="'F'">{{ 'F. ' + question.option_f }}</el-radio>
            </li>
          </ul>
        </el-radio-group>
      </li>
    </ul>
  </el-card>
</section>

<!-- 多选题 -->
<section v-if="multipleChoice.size > 0">
  <el-card shadow="hover">
    <h2>{{ multipleChoice.name }} ( {{multipleChoice.size }} 题，{{ multipleChoice.totalScore }} 分)</h2>
    <ul>
      <li v-for="(question, index) in multipleChoice.list" :key="question.subject_id" :ref="setSingleChoiceRef">
        <p>{{ index + singleChoice.size + 1 }}. {{ question.subject_name }}
          <!-- 显示图片的工具提示 -->
          <el-tooltip effect="dark" v-if="question.subject_image">
            <template #content>
              <div v-html="generateImageHtml(question.subject_image)"></div>
            </template>
            <el-button>查看图片</el-button>
          </el-tooltip>
        </p>

        <el-checkbox-group v-model="selectedAnswers[question.subject_id]">
          <ul>
            <li v-if="question.option_a != null && question.option_a !== undefined && question.option_a !== '' ">
              <el-checkbox :label="'A'">{{ 'A. ' + question.option_a }}</el-checkbox>
            </li>
            <li v-if="question.option_b != null && question.option_b !== undefined && question.option_b !== ''">
              <el-checkbox :label="'B'">{{ 'B. ' + question.option_b }}</el-checkbox>
            </li>
            <li v-if="question.option_c != null && question.option_c !== undefined && question.option_c !== ''">
              <el-checkbox :label="'C'">{{ 'C. ' + question.option_c }}</el-checkbox>
            </li>
            <li v-if="question.option_d != null && question.option_d !== undefined && question.option_d !== ''">
              <el-checkbox :label="'D'">{{ 'D. ' + question.option_d }}</el-checkbox>
            </li>
            <li v-if="question.option_e != null && question.option_e !== undefined && question.option_e !== ''">
              <el-checkbox :label="'E'">{{ 'E. ' + question.option_e }}</el-checkbox>
            </li>
            <li v-if="question.option_f != null && question.option_f !== undefined && question.option_f !== ''">
              <el-checkbox :label="'F'">{{ 'F. ' + question.option_f }}</el-checkbox>
            </li>
          </ul>
        </el-checkbox-group>
      </li>
    </ul>
  </el-card>
</section>

<!-- 判断题 -->
<section v-if="trueFalse.size > 0">
  <el-card shadow="hover">
    <h2>{{ trueFalse.name }} ({{ trueFalse.size }} 题，{{ trueFalse.totalScore }} 分)</h2>
    <ul>
      <li v-for="(question, index) in trueFalse.list" :key="question.subject_id" :ref="setSingleChoiceRef">
        <p>{{ index + 1 + singleChoice.size + multipleChoice.size }}. {{ question.subject_name }}
          <!-- 显示图片的工具提示 -->
          <el-tooltip effect="dark" v-if="question.subject_image">
            <template #content>
              <div v-html="gen00erateImageHtml(question.subject_image)"></div>
            </template>
            <el-button>查看图片</el-button>
          </el-tooltip>
        </p>

        <div class="options">
          <el-radio-group v-model="selectedAnswers[question.subject_id]">
    <ul>
      <li>
        <el-radio label="对">对</el-radio>
      </li>
      <li>
        <el-radio label="错">错</el-radio>
      </li>
    </ul>
  </el-radio-group>
        </div>
      </li>
    </ul>
  </el-card>
</section>
          </main>
      </div>
  </div>
</template>
<script setup>       
import { ref, reactive, computed, onMounted, onUnmounted, nextTick,watch} from "vue";
import { getSimulatedExam,AddSimulatedExam } from "@/api/kaoshi/index2.js";
import { error } from "jquery";
import { ElMessage, ElMessageBox,ElNotification  } from "element-plus";
import { useUserInfoStore } from "@/store/user.js";
import router from "@/router";
import { useRoute } from 'vue-router';

const userInfoStore=useUserInfoStore();
const generateImageHtml = (imageUrl) => {
return `<img src="${imageUrl}" alt="图片描述" style="height: auto; width: auto; max-width: 220px; max-height: 220px;"/>`;
};
// 定义题目数据
const singleChoice = ref({ size: 0, name: '', totalScore: 0, list: [] });
const multipleChoice = ref({ size: 0, name: '', totalScore: 0, list: [] });
const trueFalse = ref({ size: 0, name: '', totalScore: 0, list: [] });
const selectedAnswers = ref({}); // 存储每道题的选中答案
//个人信息
const studentInfo = ref({
name: userInfoStore.userInfo.nickName,
id: userInfoStore.userInfo.userId
})

const errorIds=ref([]);

const examSimu = ref({});
const dialogVisible = ref(false);
const errorMessage = ref('');

// 模拟考试信息
const params = ref({
subjectMajor: null,
subjectLv: 1,
userid:userInfoStore.userInfo.userId
});
// 将 selectedAnswers 对象转换为 JSON 字符串
const answerContent = JSON.stringify(selectedAnswers.value);
// 获取路由实例
const route = useRoute();
const examTime=ref('');
// 定义响应式变量来存储查询参数
const subjectMajor = ref('');
const subjectLv = ref('');
//redis的key
const key=ref('');

const answeredQuestions = computed(() => {
// 计算已答题的数量，即 selectedAnswers 中的键的数量
return Object.keys(selectedAnswers.value).length;
});

const isAnswered = (subjectId) => {
return selectedAnswers.value.hasOwnProperty(subjectId);
};

const totalQuestions = computed(() => {
// 计算总题目数（单选题 + 多选题 + 判断题）
return singleChoice.value.size + multipleChoice.value.size + trueFalse.value.size;
});

const progressPercentage = computed(() => {
const answered = answeredQuestions.value;
const total = totalQuestions.value;
return total === 0 ? 0 : Math.floor((answered / total) * 100); // 计算答题进度百分比
});

const getSimulated = async  () =>{
let result = await getSimulatedExam(params.value);
//没有获取到的题就弹出
if(result.data.multipleChoice.size+result.data.singleChoice.size+result.data.trueFalse.size==0){
  ElNotification({
    title: '提示',
    message: '对应类型或难度暂无考试题目',
    type: 'warning',
    duration: 2000
  });
  router.push('/exam/index2')
}
examSimu.value = result.data;
singleChoice.value = result.data.singleChoice;
multipleChoice.value = result.data.multipleChoice;
trueFalse.value = result.data.trueFalse;
examTime.value=result.data.time;
key.value=result.data.key;
// 从本地缓存中恢复 selectedAnswers



const storedAnswers = localStorage.getItem(key.value);
if (storedAnswers) {
  const data=JSON.parse(storedAnswers);
  const currentTime = Date.now();
  selectedAnswers.value = data.data;
  if (currentTime > data.expiry) {
    // 缓存已过期，清除本地缓存
    localStorage.removeItem(key.value);
    selectedAnswers.value = {};
  }
}
startTimer();
}
// 调用此函数来展示错误提示框
const showErrorDialog = (errorSubjects) => {
if (errorSubjects == null || errorSubjects.length === 0) {
  router.push('/exam/index2')
  return;
}
errorMessage.value = `${errorSubjects.join('<br><br>')}`;
dialogVisible.value = true;
};

// 处理点击确认按钮的回调
const handleConfirm = () => {
console.log('用户点击了确定');
dialogVisible.value = false;
};
const handleClose=()=>{
router.push('/exam/index2')
}
// 监听 selectedAnswers 的变化并存储到本地缓存
watch(selectedAnswers, (newVal) => {
const dataWithExpiry = {
  data: newVal,
  expiry: Date.now() +(totalTime.value*1000), // 当前时间加上有效期
};
localStorage.setItem(key.value, JSON.stringify(dataWithExpiry));
}, { deep: true });
// 倒计时小时数
const hours = ref("");
// 倒计时分钟数
const minutes = ref("");
// 倒计时秒数
const seconds = ref("");
const totalTime = ref(0);
let timer;
// 开始倒计时
const startTimer = () => {
totalTime.value = examTime.value; // 30 minutes in seconds
timer = setInterval(() => {
  if (totalTime.value <= 0) {
    clearInterval(timer);
    // 倒计时结束时自动提交试卷，不进行校验
    submitExam(false);        
  } else {
    totalTime.value--;
    hours.value = String(Math.floor(totalTime.value / 3600)).padStart(2, "0");
    minutes.value = String(Math.floor((totalTime.value % 3600) / 60)).padStart(2, "0");
    seconds.value = String(totalTime.value % 60).padStart(2, "0");
    
    // 打印跳动的时间
    // console.log(`${hours.value}:${minutes.value}:${seconds.value}`);
  }
}, 1000);
};
// 定义当前问题信息
const currentQuestion = ref({
type: '',
index: null
});

const singleChoiceRefs = ref([]);

const setSingleChoiceRef = (el) => {
if (el) {
  singleChoiceRefs.value.push(el);
}
};

const goToQuestion = (type, questionNumber) => {
currentQuestion.value.type = type;
currentQuestion.value.index = questionNumber - 1;

nextTick(() => {
  const refs = singleChoiceRefs.value;
  if (refs && refs.length > 0) {
    
    const element = refs[questionNumber - 1];
    if (element) {
      element.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });
    }
  }
});
};
// 组件挂载后获取数据并开始倒计时
onMounted(() => {
params.value.subjectMajor = route.query.subjectMajor || '';
params.value.subjectLv = route.query.subjectLv || '';
getSimulated();
});
onUnmounted(() => {
// 在组件卸载时，检查定时器是否存在
if (timer) {
  // 清除定时器以防止内存泄漏
  clearInterval(timer);
}
});
// 校验单选题
function validateSingleChoice(userAnswer, subject) {
const correctAnswer = subject.subject_answer;
const isCorrect = userAnswer === correctAnswer;
return {
  isCorrect,
  userAnswer,
  correctAnswer,
  correctOptionContent: `${correctAnswer}. ${getOptionContent(subject, correctAnswer)}`
};
}

// 校验多选题
function validateMultipleChoice(userAnswers, subject) {
const correctAnswers = subject.subject_answer.split(','); // 假设答案格式为逗号分隔
const userAnswersSorted = userAnswers.sort(); // 排序后进行无序比较
const correctSorted = correctAnswers.sort();
const isCorrect = userAnswersSorted.length === correctSorted.length && userAnswersSorted.every((val, index) => val === correctSorted[index]);
const correctOptionContents = correctAnswers.map(optionId => `${optionId}. ${getOptionContent(subject, optionId.trim())}`).join(', ');
return {
  isCorrect,
  userAnswers,
  correctAnswers,
  correctOptionContents
};
}

// 校验判断题
function validateTrueFalse(userAnswer, subject) {
  const correctAnswer = subject.subject_answer;
  const isCorrect = userAnswer === correctAnswer;
  const correctOptionContent = correctAnswer === '对' ? '正确' : '错误';
  return {
    isCorrect,
    userAnswer,
    correctAnswer,
    correctOptionContent
  };
}
// 根据选项ID获取选项内容
const getOptionContent = (subject, optionId) => {
switch (optionId.toUpperCase()) {
  case 'A':
    return subject.option_a;
  case 'B':
    return subject.option_b;
  case 'C':
    return subject.option_c;
  case 'D':
    return subject.option_d;
  case 'E':
    return subject.option_e;
  case 'F':
    return subject.option_f;
  default:
    return '';
}
};
const calculateTotalScore = () => {
let totalScore = 0;

// 单选题评分
singleChoice.value.list.forEach((question) => {
  const userAnswer = selectedAnswers.value[question.subject_id];
  if (userAnswer && userAnswer === question.subject_answer) {
    totalScore +=2; 
  }
});

// 多选题评分
multipleChoice.value.list.forEach((question) => {
  const userAnswers = selectedAnswers.value[question.subject_id];
  const correctAnswers = question.subject_answer.split(',').sort();
  if (userAnswers && userAnswers.sort().toString() === correctAnswers.toString()) {
    totalScore +=2; 
  }
});

// 判断题评分
trueFalse.value.list.forEach((question) => {
  const userAnswer = selectedAnswers.value[question.subject_id];
  if (userAnswer && userAnswer === question.subject_answer) {
    totalScore += 2; 
  }
});

return totalScore;
};

// 提交试卷时计算总分
const submitExam = async (validate = true) => {
if (validate) {
  // 校验是否完成所有题目
  if (Object.keys(selectedAnswers.value).length !== singleChoice.value.size + multipleChoice.value.size + trueFalse.value.size) {
    ElMessage({
      type: 'error',
      message: `请完成所有题目`,
    });
    return;
  }
}

// 错误记录
let errorSubjects = [];

// 校验单选题
singleChoice.value.list.forEach((subject, index) => {
  const userAnswer = selectedAnswers.value[subject.subject_id];
  if (userAnswer) {
    const result = validateSingleChoice(userAnswer, subject);
    if (!result.isCorrect) {
      errorIds.value.push(subject.subject_id);
      errorSubjects.push(`题号：${index + 1} 单选题：${subject.subject_name}   <br>你的选择为：${result.userAnswer}   <br>正确答案为：${result.correctOptionContent}`);
    }
  }
});

// 校验多选题
multipleChoice.value.list.forEach((subject, index) => {
  const userAnswers = selectedAnswers.value[subject.subject_id];
  if (userAnswers) {
    const result = validateMultipleChoice(userAnswers, subject);
    if (!result.isCorrect) {
      errorIds.value.push(subject.subject_id);
      errorSubjects.push(`题号：${index + 1} 多选题：${subject.subject_name}    <br>你的选择为：${result.userAnswers.join(', ')}    <br>正确答案为：${result.correctOptionContents}`);
    }
  }
});

// 校验判断题
trueFalse.value.list.forEach((subject, index) => {
  const userAnswer = selectedAnswers.value[subject.subject_id];
  if (userAnswer) {
    const result = validateTrueFalse(userAnswer, subject);
    if (!result.isCorrect) {
      errorIds.value.push(subject.subject_id);
      errorSubjects.push(`题号：${index + 1} 判断题：${subject.subject_name}    <br>你的选择为：${result.userAnswer}    <br>正确答案为：${result.correctOptionContent}`);
    }
  }
});

// 计算总分
const totalScore = calculateTotalScore();
// 将 selectedAnswers 对象转换为 JSON 字符串
const answerContent = JSON.stringify(selectedAnswers.value);
const timeUsed = 1800 - totalTime.value;
// 提交试卷
const SimulatedExam = await AddSimulatedExam({
  answerContent: answerContent,
  score: totalScore,
  userId: userInfoStore.userInfo.userId,
  timeUsed: timeUsed,
  key: key.value,
  errorMessage: `${errorSubjects.join('<br><br>')}`,
  errorIds: errorIds.value
});

if (SimulatedExam.code == 200) {
  ElMessage({
    type: 'success',
    message: `考试结束，你的分数为：${totalScore}`,
  });
  // 清除 selectedAnswers
  localStorage.removeItem(key.value);
} else {
  ElMessage({
    type: 'error',
    message: `提交失败`,
  });
}
showErrorDialog(errorSubjects);
};
</script>

<style scoped>
/* 页面基础布局 */
.exam-page {
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 按列方向排列子元素 */
font-family: Arial, sans-serif; /* 设置字体 */
}

/* 标题栏 */
.header {
z-index: 99; /* 设置堆叠顺序 */
position: fixed; /* 固定标题栏 */
top: 60px; /* 距离顶部的距离 */
left: 0; /* 距离左侧的距离 */
width: 100%; /* 占满宽度 */
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中 */
justify-content: space-between; /* 两端对齐 */
padding: 1vw 5vw; /* 内边距随视口宽度变化 */
background: linear-gradient(90deg, #e63946, #f76c6c); /* 红色渐变背景 */
color: white; /* 字体颜色 */
font-size: clamp(14px, 1.5vw, 24px); /* 动态字体大小 */
height: clamp(50px, 8vh, 100px); /* 动态标题栏高度 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
box-sizing: border-box; /* 包括内边距 */
}

.header-middle {
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
flex-grow: 1; /* 占据剩余空间 */
text-align: center; /* 文本居中 */
}

.timer {
color: #ffffff; /* 字体颜色 */
font-size: 18px; /* 字体大小 */
}

.timer-title {
font-weight: bold; /* 加粗字体 */
margin-right: 10px; /* 右侧外边距 */
}

.timer-display {
display: inline-block; /* 行内块级元素 */
font-size: 20px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
}

.content {
margin-top: clamp(60px, 10vh, 100px); /* 顶部间距动态调整 */
}

@media (max-width: 768px) {
.header {
  flex-direction: column; /* 小屏幕下标题栏可换行 */
  align-items: flex-start; /* 左侧对齐 */
  padding: 1vh 2vw; /* 调整内边距 */
}
}

.submit-btn {
background: #e63946; /* 红色背景 */
color: white; /* 字体颜色 */
border: none; /* 无边框 */
padding: 10px 20px; /* 内边距 */
border-radius: 8px; /* 圆角 */
cursor: pointer; /* 鼠标指针样式 */
transition: all 0.3s; /* 平滑过渡效果 */
}

.submit-btn:hover {
background: #d62839; /* 悬停时更深红色 */
}

/* 主体布局 */
.content {
display: flex; /* 使用 Flexbox 布局 */
}

/* 左侧信息栏 */
.sidebar {
position: fixed; /* 固定位置 */
top: 120px; /* 距离顶部的距离 */
left: 80px; /* 距离左侧的距离 */
width: 280px; /* 宽度 */
height: calc(100vh - clamp(60px, 10vh, 100px)); /* 动态高度 */
padding: 19px; /* 内边距 */
z-index: 80; /* 设置堆叠顺序 */
}

.content {
margin-left: 280px; /* 左侧外边距 */
flex: 1; /* 占据剩余空间 */
padding: 20px; /* 内边距 */
}

.card {
background: white; /* 背景色 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
border-radius: 8px; /* 圆角 */
padding: 16px; /* 内边距 */
margin-bottom: 15px; /* 底部外边距 */

}

/* 新的左侧信息卡片样式 */
.sidebar-info {
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 按列方向排列子元素 */
gap:7px; /* 项目之间的间距 */
}
.exam-info{
display: flex;
flex-direction: column;
height: 53px;
}
/* 下划线分隔线样式 */
.sidebar-info hr {
border: 0; /* 无边框 */
height: 1px; /* 高度 */
background: #ddd; /* 背景色 */
margin: 10px 0; /* 上下外边距 */
}

.type-navigation {
display: flex; /* 使用 Flexbox 布局 */
flex-wrap: wrap; /* 允许换行 */
gap: 5px; /* 项目之间的间距 */
}

.type-navigation button {
width: 30px; /* 宽度 */
height: 30px; /* 高度 */
background: #f0f0f0; /* 背景色 */
border: none; /* 无边框 */
border-radius: 4px; /* 圆角 */
cursor: pointer; /* 鼠标指针样式 */
transition: background-color 0.3s; /* 平滑过渡效果 */
}

.type-navigation button.active {
background: #ff4040; /* 激活状态背景色 */
color: white; /* 字体颜色 */
}

.type-navigation button:hover {
background: #c6e2ff; /* 悬停时背景色 */
}

/* 试题展示区 */
.h1 {
/* background-color: #333; */
display: flex; /* 使用 Flexbox 布局 */
align-items: start; /* 垂直居中对齐 */
justify-content: center;
width: 350px;
height: 36px;

}

.question-area {
counter-reset: question; /* 初始化计数器 */
flex: 1; /* 占据剩余空间 */
padding: 20px; /* 内边距 */
background-color: #ffffff; /* 背景色 */
border-radius: 8px; /* 圆角 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 阴影效果 */
margin-top: -25px; /* 设置负的 margin-top 值使其与左侧栏头部齐平 */
}

/* 单个题目容器样式 */
.question {
margin-bottom: 30px; /* 底部外边距 */
padding: 20px; /* 内边距 */
background-color: #ffffff; /* 背景色 */
border-radius: 8px; /* 圆角 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
border-left: 6px solid #f02121; /* 左边框 */
transition: transform 0.3s, box-shadow 0.3s; /* 平滑过渡效果 */
}

.question:hover {
transform: translateY(-2px); /* 鼠标悬停时上移 */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* 鼠标悬停时的阴影效果 */
}

/* 题目标题样式 */
.question-title {
font-weight: bold; /* 加粗字体 */
font-size: 18px; /* 字体大小 */
color: #333333; /* 文字颜色 */
margin-bottom: 15px; /* 底部外边距 */
line-height: 1.5; /* 行高 */
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中对齐 */
gap: 10px; /* 项目之间的间距 */
}

/* 标题前的数字高亮 */
.question-title::before {
content: counter(question); /* 显示计数器值 */
counter-increment: question; /* 计数器递增 */
display: inline-block; /* 行内块级元素 */
background-color: #ff2e2e; /* 背景色 */
color: white; /* 文字颜色 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
width: 30px; /* 宽度 */
height: 30px; /* 高度 */
text-align: center; /* 文字水平居中 */
line-height: 30px; /* 文字垂直居中 */
border-radius: 50%; /* 圆形 */
}

/* 选项容器 */
.question-options {
display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 按列方向排列子元素 */
gap: 15px; /* 项目之间的间距 */
margin-top: 10px; /* 顶部外边距 */
}

/* 单选框和多选框的外层样式 */
.question-options .el-radio,
.question-options .el-checkbox {
display: flex; /* 使用 Flexbox 布局 */
align-items: center; /* 垂直居中对齐 */
padding: 12px 13px; /* 内边距 */
border-radius: 8px; /* 圆角 */
background-color: #ffffff; /* 背景色 */
transition: all 0.3s ease; /* 平滑过渡效果 */
font-size: 16px; /* 字体大小 */
color: #333; /* 文字颜色 */
cursor: pointer; /* 鼠标指针样式 */
gap: 10px; /* 项目之间的间距 */
width: 110px; /* 宽度 */
box-sizing: border-box; /* 盒模型 */
}
/* 鼠标悬停时的样式 */
.question-options .el-radio:hover,
.question-options .el-checkbox:hover {
border-color: #e32d2d; /* 边框颜色 */
background-color: #f0f9ff; /* 背景色 */
}

/* 被禁用状态样式 */
.question-options .el-radio.is-disabled,
.question-options .el-checkbox.is-disabled {
border-color: #e4e4e4; /* 边框颜色 */
background-color: #f5f5f5; /* 背景色 */
color: #bcbcbc; /* 文字颜色 */
cursor: not-allowed; /* 鼠标指针样式 */
}

/* 图标样式（包括选中与未选中状态） */
.question-options .el-radio .el-radio__input,
.question-options .el-checkbox .el-checkbox__input {
display: flex; /* 使用 Flexbox 布局 */
justify-content: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
width: 20px; /* 宽度 */
height: 20px; /* 高度 */
border-radius: 50%; /* 圆形 */
border: 2px solid #dcdcdc; /* 边框 */
background-color: #ff4b4b; /* 背景色 */
transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 单选框选中时的图标 */
.question-options .el-radio.is-checked .el-radio__input {
border-color: #f33737; /* 边框颜色 */
background-color: #ee2424; /* 背景色 */
}

/* 多选框选中时的图标 */
.question-options .el-checkbox.is-checked .el-checkbox__input {
border-color: #f12020; /* 边框颜色 */
background-color: #f73131; /* 背景色 */
}

/* 图标中的勾号 */
.question-options .el-checkbox.is-checked .el-checkbox__input::after {
content: "✔"; /* 勾号符号 */
font-size: 12px; /* 字体大小 */
color: white; /* 文字颜色 */
text-align: center; /* 文字水平居中 */
}

/* 单选框和多选框的文本样式 */
.question-options .el-radio__label,
.question-options .el-checkbox__label {
font-size: 16px; /* 字体大小 */
color: #333; /* 文字颜色 */
flex-grow: 1; /* 占据剩余空间 */
padding-left: 10px; /* 左边内边距 */
}

/* 增加选项之间的间距 */
.question-options {
gap: 12px; /* 项目之间的间距 */
}
.progress{

height: 30px;
align-content: center;
display: flex;
flex-direction: column;
justify-content: center;
}
/* 进度条 */
.progress-info .el-progress {
height:20px;
margin-bottom: 10px; /* 底部外边距 */
}

/* 答题卡整体样式 */
.question-types {

display: flex; /* 使用 Flexbox 布局 */
flex-direction: column; /* 按列方向排列子元素 */
}

.type-title {

height: 17px; /* 高度 */
padding: 1px; /* 内边距 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
color: #333; /* 文字颜色 */
margin-bottom: 10px; /* 底部外边距 */
}
.a1{
top: -5px;
position: relative;
}
/* 题号按钮 */
.question-types-container .question-navigation {

display: flex; /* 使用 Flexbox 布局 */
flex-wrap: wrap; /* 允许换行 */
gap: 7.8px; /* 项目之间的间距 */
align-items: center; /* 垂直居中对齐 */

}
.question-types-container .question-navigation > * {
flex: 0 0 calc((100% - 8px * 4) / 5); /* 每行 5 个 */
max-width: calc((100% - 8px * 4) / 5); /* 避免超出 */
}

.question-btn {
width: 35px; /* 宽度 */
height: 35px; /* 高度 */
border-radius: 50%; /* 圆形 */
border: 1px solid #dcdcdc; /* 边框 */
background-color: #f0f0f0; /* 背景色 */
color: #333; /* 文字颜色 */
font-size: 14px; /* 字体大小 */
font-weight: bold; /* 加粗字体 */
text-align: center; /* 文字水平居中 */
line-height: 35px; /* 文字垂直居中 */
cursor: pointer; /* 鼠标指针样式 */
transition: all 0.3s; /* 平滑过渡效果 */
}

.question-btn:hover {
color: white; /* 文字颜色 */
}
.jump-button.answered {
background-color: #ff1b1b; /* 已回答状态的背景色 */
border-color: #c23a3a; /* 边框颜色 */
color: white; /* 文字颜色 */
}
.jump-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 添加间距 */
}

.jump-button {
background-color: #ddd;
color: black;
border: none;
border-radius: 50%; /* 圆形按钮 */
width: 25px; /* 固定按钮的宽度 */
height: 25px; /* 固定按钮的高度 */
padding: 0; /* 去掉内边距，确保按钮大小固定 */
font-size: 12px; /* 设置字体大小 */
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
text-align: center;
cursor: pointer;
transition: background-color 0.3s;
}
ul {
list-style-type: none;
}
</style>